<template>
    <div class="mediavideo1Model" :id="id"></div>
</template>

<script>
import Player from 'xgplayer';
import config from '@/js/util/config.js';
import register from '@/js/main/register.js';
import 'xgplayer/dist/index.min.css';

export default {
    props: {
        element: {
            type: Object
        },
        id: {
            type: String
        },
        mode: {
            type: Number
        }
    },
    data() {
        return {
            playerVideo: null
        };
    },
    mounted() {
        register.addComponent(this);
        this.creatPlayer(this.element, 'new');
    },
    methods: {
        redraw() {
            // this.creatPlayer(this.element, 'replay');
        },
        creatPlayer(element, type) {
            let videoUrl = '';
            if (this.mode === 3) {
                videoUrl = `/video/${element.data[0].id}.${element.data[0].filetype}`;
            } else {
                videoUrl = element.data[0].id ? `${config.getServiceURL('scene')}service/scene/file/download?file=${element.data[0].url}` : element.data[0].url;
            }
            if (type === 'replay') {
                this.playerVideo.destroy(true);
            }
            this.playerVideo = new Player({
                id: this.id,
                url: videoUrl,
                fluid: true,
                autoplay: true,
                cssFullscreen: true,
                controls: false,
                volume: 1,
                loop: true
            });
        }
    },
    destroyed() {
        if (this.playerVideo != null) {
            this.playerVideo.destroy();
            this.playerVideo = null;
        }
        register.removeComponent(this);
    }
};
</script>

<style lang="scss" scoped>
.mediavideo1Model {
    width: 100%;
    height: 100% !important;
    padding: 0 !important;
    display: block;
    video {
        width: 100%;
        height: 100%;
        object-fit: fill !important;
    }
}
.xgplayer-skin-default {
    background: none;
    width: 100%;
    height: 100% !important;
    display: block;
    video {
        width: 100%;
        height: 100%;
        object-fit: fill !important;
    }
}
</style>